<template>
  <!-- 网站头部导航栏：包含用户头像、搜索框、导航菜单和移动端菜单 -->
  <header class="header">
    <!-- 头部内容容器 -->
    <div class="header-content">
      <!-- 左侧：用户头像区域 -->
      <div class="header-left">
        <!-- 用户头像：显示用户头像 -->
        <div class="user-avatar">
          <img src="/src/assets/pic/avatar.jpg" alt="用户头像" />
        </div>
      </div>

      <!-- 搜索框居中：桌面端搜索功能 -->
      <div class="search-box desktop-search">
        <!-- 搜索输入框：支持搜索文章功能 -->
        <el-input v-model="searchText" placeholder="搜索文章..." class="search-input" :prefix-icon="Search" clearable />
      </div>

      <!-- 桌面端导航菜单：主要页面导航链接 -->
      <nav class="nav-menu desktop-nav">
        <!-- 首页导航链接 -->
        <router-link to="/" class="nav-link" :class="{ active: $route.path === '/' }" @click="scrollToTop">
          首页
        </router-link>
        <!-- 博客导航链接 -->
        <router-link to="/blog" class="nav-link" :class="{ active: $route.path.startsWith('/blog') }"
          @click="scrollToTop">
          博客
        </router-link>
        <!-- 分类下拉菜单：包含技术、生活、感想、教程等分类 -->
        <div class="nav-dropdown" @click="toggleCategory" @mouseleave="closeCategory">
          <span class="nav-link">
            分类
            <el-icon :class="{ rotated: categoryOpen }">
              <ArrowDown />
            </el-icon>
          </span>
          <!-- 分类下拉菜单内容 -->
          <div class="dropdown-menu" :class="{ active: categoryOpen }">
            <router-link to="/category/tech" class="dropdown-item" @click="closeCategory">技术</router-link>
            <router-link to="/category/life" class="dropdown-item" @click="closeCategory">生活</router-link>
            <router-link to="/category/thoughts" class="dropdown-item" @click="closeCategory">感想</router-link>
            <router-link to="/category/tutorial" class="dropdown-item" @click="closeCategory">教程</router-link>
          </div>
        </div>
        <!-- 时间线导航链接 -->
        <router-link to="/timeline" class="nav-link" :class="{ active: $route.path === '/timeline' }">
          时间线
        </router-link>
        <!-- 留言板导航链接 -->
        <router-link to="/guestbook" class="nav-link" :class="{ active: $route.path === '/guestbook' }">
          留言板
        </router-link>
        <!-- 博主导航链接 -->
        <router-link to="/about" class="nav-link" :class="{ active: $route.path === '/about' }">
          博主
        </router-link>
        <!-- 友链导航链接 -->
        <router-link to="/friends" class="nav-link" :class="{ active: $route.path === '/friends' }">
          友链
        </router-link>
      </nav>

      <!-- 移动端菜单：移动端汉堡菜单组件 -->
      <MobileMenu />
    </div>
  </header>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

/**
 * 导入Vue 3组合式API
 * @description 用于响应式数据管理
 */
import { ref } from 'vue'

/**
 * 导入Element Plus图标组件
 * @description 用于界面图标显示
 */
import { User, Search, ArrowDown } from '@element-plus/icons-vue'

/**
 * 导入移动端菜单组件
 * @description 用于移动端的汉堡菜单功能
 */
import MobileMenu from './MobileMenu.vue'

// ==================== 响应式数据 ====================

/**
 * 搜索框的输入内容
 * @description 用于存储用户在搜索框中输入的搜索关键词
 */
const searchText = ref('')

/**
 * 顶部导航栏分类下拉菜单的显示状态
 * @description 控制桌面端导航栏中分类下拉菜单的展开/收起
 */
const categoryOpen = ref(false)

// ==================== 交互方法 ====================

/**
 * 切换顶部导航栏分类下拉菜单的显示状态
 * @description 控制桌面端导航栏中分类下拉菜单的展开/收起
 */
const toggleCategory = () => {
  // 切换分类下拉菜单的显示状态
  categoryOpen.value = !categoryOpen.value
}

/**
 * 关闭顶部导航栏分类下拉菜单
 * @description 当鼠标移出分类下拉菜单时自动关闭
 */
const closeCategory = () => {
  // 关闭分类下拉菜单
  categoryOpen.value = false
}

/**
 * 滚动到页面顶部
 * @description 点击导航链接时自动滚动到页面顶部，提升用户体验
 */
const scrollToTop = () => {
  // 平滑滚动到页面顶部
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}
</script>

<style scoped lang="scss">
// 导入头部导航栏样式
@use '../assets/styles/components/_header';
</style>